<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="author" content="王赛 翻译整理">

<title>
  
    Reboot &middot; Bootstrap
  
</title>

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" tppabs="http://v4.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Documentation extras -->
<link href="../../assets/css/docs.min.css" tppabs="http://v4.bootcss.com/assets/css/docs.min.css" rel="stylesheet">

<!-- Google Web fonts -->
<link href="../../../fonts.useso.com/css-family=Roboto-300,400,400italic,500.css" tppabs="http://fonts.useso.com/css?family=Roboto:300,400,400italic,500" rel="stylesheet">
<link href="../../../fonts.useso.com/css-family=Source+Sans+Pro-400,300,400italic,600.css" tppabs="http://fonts.useso.com/css?family=Source+Sans+Pro:400,300,400italic,600" rel='stylesheet' type='text/css'>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" tppabs="http://v4.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../assets/js/ie-emulation-modes-warning.js" tppabs="http://v4.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>

<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
<link rel="icon" href="/favicon.ico">

    <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "../../../hm.baidu.com/hm.js-fc4ecdb3b7e797fdd7347e29dbec6802.js"/*tpa=http://hm.baidu.com/hm.js?fc4ecdb3b7e797fdd7347e29dbec6802*/;
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
  </head>
  <body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
    <a id="skippy" class="sr-only sr-only-focusable" href="#content">
      <div class="container">
        <span class="skiplink-text">Skip to main content</span>
      </div>
    </a>

    <header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
  

  <div class="clearfix">
    <button class="navbar-toggler pull-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
      &#9776;
    </button>
    <a class="navbar-brand hidden-sm-up" href="../../index.htm" tppabs="http://v4.bootcss.com/">
      Bootstrap
    </a>
  </div>
  <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
    <nav class="nav navbar-nav">
      <a class="nav-item nav-link " href="../../index.htm" tppabs="http://v4.bootcss.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>
      <a class="nav-item nav-link active" href="../../getting-started/introduction/index.htm" tppabs="http://v4.bootcss.com/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">文档</a>
      <a class="nav-item nav-link " href="../../examples/index.htm" tppabs="http://v4.bootcss.com/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">实例</a>
      <a class="nav-item nav-link" href="javascript:if(confirm(%27http://themes.getbootstrap.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://themes.getbootstrap.com/%27" tppabs="http://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">主题</a>
      <a class="nav-item nav-link" href="javascript:if(confirm(%27http://expo.bootcss.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://expo.bootcss.com/%27" tppabs="http://expo.bootcss.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">优站精选</a>
      <a class="nav-item nav-link" href="javascript:if(confirm(%27http://blog.getbootstrap.com/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27http://blog.getbootstrap.com/%27" tppabs="http://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">博客</a>
    </nav>
  </div>
</header>


    <div class="bd-pageheader">
      <div class="container">
        
  <h1>Content</h1>
  <p class="lead">
    Styles for displaying content with some of the most commonly used HTML elements, including normalization, typography, images, tables, and more.
  </p>


      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-md-3 col-md-push-9 bd-sidebar">
          <div class="bd-sidebar">

  <form class="bd-search hidden-sm-down">
    <input type="text" class="form-control" id="search-input" placeholder="Search...">
    <div class="dropdown-menu bd-search-results" id="search-results"></div>
  </form>

  <nav class="bd-links" id="docsNavbarContent">
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../getting-started/introduction/index.htm" tppabs="http://v4.bootcss.com/getting-started/introduction">
        
          Getting started
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../getting-started/introduction/index.htm" tppabs="http://v4.bootcss.com/getting-started/introduction">
                Introduction
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/download/index.htm" tppabs="http://v4.bootcss.com/getting-started/download">
                Download
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/browsers-devices/index.htm" tppabs="http://v4.bootcss.com/getting-started/browsers-devices">
                Browsers & devices
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/options/index.htm" tppabs="http://v4.bootcss.com/getting-started/options">
                Options
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/flexbox/index.htm" tppabs="http://v4.bootcss.com/getting-started/flexbox">
                Flexbox
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/build-tools/index.htm" tppabs="http://v4.bootcss.com/getting-started/build-tools">
                Build tools
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../getting-started/best-practices/index.htm" tppabs="http://v4.bootcss.com/getting-started/best-practices">
                Best practices
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../layout/overview/index.htm" tppabs="http://v4.bootcss.com/layout/overview">
        
          Layout
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../layout/overview/index.htm" tppabs="http://v4.bootcss.com/layout/overview">
                Overview
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../layout/grid/index.htm" tppabs="http://v4.bootcss.com/layout/grid">
                Grid
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../layout/media-object/index.htm" tppabs="http://v4.bootcss.com/layout/media-object">
                Media object
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../layout/responsive-utilities/index.htm" tppabs="http://v4.bootcss.com/layout/responsive-utilities">
                Responsive utilities
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      
        
      

      <div class="bd-toc-item active">
        
          <a class="bd-toc-link" href="index.htm" tppabs="http://v4.bootcss.com/content/reboot">
        
          Content
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            
              
            

            <li class="active bd-sidenav-active">
              <a href="index.htm" tppabs="http://v4.bootcss.com/content/reboot">
                Reboot
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../typography/index.htm" tppabs="http://v4.bootcss.com/content/typography">
                Typography
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../code/index.htm" tppabs="http://v4.bootcss.com/content/code">
                Code
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../images/index.htm" tppabs="http://v4.bootcss.com/content/images">
                Images
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../tables/index.htm" tppabs="http://v4.bootcss.com/content/tables">
                Tables
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../figures/index.htm" tppabs="http://v4.bootcss.com/content/figures">
                Figures
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../components/buttons/index.htm" tppabs="http://v4.bootcss.com/components/buttons">
        
          Components
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../components/buttons/index.htm" tppabs="http://v4.bootcss.com/components/buttons">
                Buttons
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/button-group/index.htm" tppabs="http://v4.bootcss.com/components/button-group">
                Button group
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/button-dropdown/index.htm" tppabs="http://v4.bootcss.com/components/button-dropdown">
                Button dropdown
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/forms/index.htm" tppabs="http://v4.bootcss.com/components/forms">
                Forms
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/input-group/index.htm" tppabs="http://v4.bootcss.com/components/input-group">
                Input group
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/dropdowns/index.htm" tppabs="http://v4.bootcss.com/components/dropdowns">
                Dropdowns
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/jumbotron/index.htm" tppabs="http://v4.bootcss.com/components/jumbotron">
                Jumbotron
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/label/index.htm" tppabs="http://v4.bootcss.com/components/label">
                Label
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/alerts/index.htm" tppabs="http://v4.bootcss.com/components/alerts">
                Alerts
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/card/index.htm" tppabs="http://v4.bootcss.com/components/card">
                Card
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/navs/index.htm" tppabs="http://v4.bootcss.com/components/navs">
                Navs
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/navbar/index.htm" tppabs="http://v4.bootcss.com/components/navbar">
                Navbar
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/breadcrumb/index.htm" tppabs="http://v4.bootcss.com/components/breadcrumb">
                Breadcrumb
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/pagination/index.htm" tppabs="http://v4.bootcss.com/components/pagination">
                Pagination
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/progress/index.htm" tppabs="http://v4.bootcss.com/components/progress">
                Progress
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/list-group/index.htm" tppabs="http://v4.bootcss.com/components/list-group">
                List group
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/modal/index.htm" tppabs="http://v4.bootcss.com/components/modal">
                Modal
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/scrollspy/index.htm" tppabs="http://v4.bootcss.com/components/scrollspy">
                Scrollspy
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/tooltips/index.htm" tppabs="http://v4.bootcss.com/components/tooltips">
                Tooltips
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/popovers/index.htm" tppabs="http://v4.bootcss.com/components/popovers">
                Popovers
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/collapse/index.htm" tppabs="http://v4.bootcss.com/components/collapse">
                Collapse
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/carousel/index.htm" tppabs="http://v4.bootcss.com/components/carousel">
                Carousel
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../components/utilities/index.htm" tppabs="http://v4.bootcss.com/components/utilities">
                Utilities
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../about/history/index.htm" tppabs="http://v4.bootcss.com/about/history/">
        
          About
        </a>

        <ul class="nav bd-sidenav">
          
            
            

            

            <li class="">
              <a href="../../about/history/index.htm" tppabs="http://v4.bootcss.com/about/history/">
                History
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/team/index.htm" tppabs="http://v4.bootcss.com/about/team">
                Team
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/brand/index.htm" tppabs="http://v4.bootcss.com/about/brand">
                Brand
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/license/index.htm" tppabs="http://v4.bootcss.com/about/license">
                License
              </a>

              
            </li>
          
            
            

            

            <li class="">
              <a href="../../about/translations/index.htm" tppabs="http://v4.bootcss.com/about/translations">
                Translations
              </a>

              
            </li>
          
        </ul>
      </div>
    
      
      
      

      

      <div class="bd-toc-item ">
        
          <a class="bd-toc-link" href="../../migration/index.htm" tppabs="http://v4.bootcss.com/migration/">
        
          Migration
        </a>

        <ul class="nav bd-sidenav">
          
        </ul>
      </div>
    
  </nav>
</div>

        </div>
        <div class="col-md-9 col-md-pull-3 bd-content">
          <h1 class="bd-title">Reboot</h1>
          <p>Part of Bootstrap’s job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.</p>

<p>Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <code>&lt;table&gt;</code> styles for a simpler baseline and later provide <code>.table</code>, <code>.table-bordered</code>, and more.</p>

<h2 id="contents">Contents</h2>

<ul id="markdown-toc">
  <li><a href="#contents" id="markdown-toc-contents">Contents</a></li>
  <li><a href="#approach" id="markdown-toc-approach">Approach</a></li>
  <li><a href="#page-defaults" id="markdown-toc-page-defaults">Page defaults</a></li>
  <li><a href="#headings-and-paragraphs" id="markdown-toc-headings-and-paragraphs">Headings and paragraphs</a></li>
  <li><a href="#lists" id="markdown-toc-lists">Lists</a></li>
  <li><a href="#preformatted-text" id="markdown-toc-preformatted-text">Preformatted text</a></li>
  <li><a href="#tables" id="markdown-toc-tables">Tables</a></li>
  <li><a href="#forms" id="markdown-toc-forms">Forms</a></li>
  <li><a href="#misc-elements" id="markdown-toc-misc-elements">Misc elements</a>    <ul>
      <li><a href="#address" id="markdown-toc-address">Address</a></li>
      <li><a href="#blockquote" id="markdown-toc-blockquote">Blockquote</a></li>
      <li><a href="#inline-elements" id="markdown-toc-inline-elements">Inline elements</a></li>
    </ul>
  </li>
</ul>

<h2 id="approach">Approach</h2>

<p>Here are our guidelines and reasons for choosing what to override in Reboot:</p>

<ul>
  <li>Update some browser default values to use <code>rem</code>s instead of <code>em</code>s for scalable component spacing.</li>
  <li>Avoid <code>margin-top</code>. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of <code>margin</code> is a simpler mental model.</li>
  <li>For easier scaling across device sizes, block elements should use <code>rem</code>s for <code>margin</code>s.</li>
  <li>Keep declarations of <code>font</code>-related properties to a minimum, using <code>inherit</code> whenever possible.</li>
</ul>

<h2 id="page-defaults">Page defaults</h2>

<p>The <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> elements are updated to provide better page-wide defaults. More specifically:</p>

<ul>
  <li>The <code>box-sizing</code> is globally set on every element—including <code>*:before</code> and <code>*:after</code>, to <code>border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.</li>
  <li>A base <code>font-size: 16px</code> is declared on the <code>&lt;html&gt;</code> and <code>font-size: 1rem</code> on the <code>&lt;body&gt;</code> for easy responsive type-scaling via media queryies.</li>
  <li>The <code>&lt;body&gt;</code> also sets a global <code>font-family</code> and <code>line-height</code>. This is inherited later by some form elements to prevent font inconsistencies.</li>
  <li>For safety, the <code>&lt;body&gt;</code> has a declared <code>background-color</code>, defaulting to <code>#fff</code>.</li>
</ul>

<h2 id="headings-and-paragraphs">Headings and paragraphs</h2>

<p>All heading elements—e.g., <code>&lt;h1&gt;</code>—and <code>&lt;p&gt;</code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p>

<div class="bd-example">

<h1 id="h1-heading">h1 heading</h1>
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

<h2 id="h2-heading">h2 heading</h2>
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

<h3 id="h3-heading">h3 heading</h3>
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

<h4 id="h4-heading">h4 heading</h4>
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

<h5 id="h5-heading">h5 heading</h5>
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

<h6 id="h6-heading">h6 heading</h6>
<p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

</div>

<h2 id="lists">Lists</h2>

<p>All lists—<code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code>, and <code>&lt;dl&gt;</code>—have their <code>margin-top</code> removed and a <code>margin-bottom: 1rem</code>. Nested lists have no <code>margin-bottom</code>.</p>

<div class="bd-example">

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

</div>

<p>For simpler styling, clear hierarchy, and better spacing, description lists have updated <code>margin</code>s. <code>&lt;dd&gt;</code>s reset <code>margin-left</code> to <code>0</code> and add <code>margin-bottom: .5rem</code>. <code>&lt;dt&gt;</code>s are <strong>bolded</strong>.</p>

<div class="bd-example">

<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

</div>

<h2 id="preformatted-text">Preformatted text</h2>

<p>The <code>&lt;pre&gt;</code> element is reset to remove its <code>margin-top</code> and use <code>rem</code> units for its <code>margin-bottom</code>.</p>

<div class="bd-example">

<pre>
.example-element {
  margin-bottom: 1rem;
}
</pre>

</div>

<h2 id="tables">Tables</h2>

<p>Tables are slightly adjusted to style <code>&lt;caption&gt;</code>s and ensure consistent <code>text-align</code> throughout. Additional changes for borders, padding, and more come with <a href="../tables/index.htm" tppabs="http://v4.bootcss.com/content/tables/">the <code>.table</code> class</a>.</p>

<div class="bd-example">
  <table>
    <caption>
      This is an example table, and this is its caption to describe the contents.
    </caption>
    <thead>
      <tr>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>

<h2 id="forms">Forms</h2>

<p>Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:</p>

<ul>
  <li><code>&lt;fieldset&gt;</code>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.</li>
  <li><code>&lt;legend&gt;</code>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.</li>
  <li><code>&lt;label&gt;</code>s are set to <code>display: inline-block</code> to allow <code>margin</code> to be applied.</li>
  <li><code>&lt;input&gt;</code>s, <code>&lt;selects&gt;</code>s, <code>&lt;textareas&gt;</code>s, and <code>&lt;buttons&gt;</code>s are mostly addressed by Normalize, but Reboot removes their <code>margin</code> and sets <code>line-height: inherit</code>, too.</li>
  <li><code>&lt;textarea&gt;</code>s are modified to only be resizeble vertically as horizontal resizing often “breaks” page layout.</li>
</ul>

<p>These changes, and more, are demonstrated below.</p>

<form class="bd-example">
  <fieldset>
    <legend>Example legend</legend>

    <p>
      <label for="input">Example input</label>
      <input type="text" id="input" placeholder="Example input" />
    </p>

    <p>
      <label for="select">Example select</label>
      <select id="select">
        <option value="">Choose...</option>
        <optgroup label="Option group 1">
          <option value="">Option 1</option>
          <option value="">Option 2</option>
          <option value="">Option 3</option>
        </optgroup>
        <optgroup label="Option group 2">
          <option value="">Option 4</option>
          <option value="">Option 5</option>
          <option value="">Option 6</option>
        </optgroup>
      </select>
    </p>

    <p>
      <label>
        <input type="checkbox" value="" />
        Check this checkbox
      </label>
    </p>

    <p>
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="" />
        Option one is this and that
      </label>
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />
        Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
      </label>
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="" />
        Option three is disabled
      </label>
    </p>

    <p>
      <label for="textarea">Example textarea</label>
      <textarea id="textarea" rows="3"></textarea>
    </p>

    <p>
      <label for="time">Example temporal</label>
      <input type="datetime" id="time" />
    </p>

    <p>
      <label for="output">Example output</label>
      <output name="result" id="output">100</output>
    </p>

    <p>
      <button type="submit">Button submit</button>
      <input type="submit" value="Input submit button" />
      <input type="button" value="Input button" />
    </p>

    <p>
      <button type="submit" disabled="">Button submit</button>
      <input type="submit" value="Input submit button" disabled="" />
      <input type="button" value="Input button" disabled="" />
    </p>
  </fieldset>
</form>

<h2 id="misc-elements">Misc elements</h2>

<h3 id="address">Address</h3>

<p>The <code>&lt;address&gt;</code> element is updated to reset the browser default <code>font-style</code> from <code>italic</code> to <code>normal</code>. <code>line-height</code> is also now inherited, and <code>margin-bottom: 1rem</code> has been added. <code>&lt;address&gt;</code>s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <code>&lt;br&gt;</code>.</p>

<div class="bd-example">
  <address>
    <strong>Twitter, Inc.</strong><br />
    1355 Market St, Suite 900<br />
    San Francisco, CA 94103<br />
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>

  <address>
    <strong>Full Name</strong><br />
    <a href="mailto:#">first.last@example.com</a>
  </address>
</div>

<h3 id="blockquote">Blockquote</h3>

<p>The default <code>margin</code> on blockquotes is <code>1em 40px</code>, so we reset that to <code>0 0 1rem</code> for something more consistent with other elements.</p>

<div class="bd-example">
  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
  </blockquote>
</div>

<h3 id="inline-elements">Inline elements</h3>

<p>The <code>&lt;abbr&gt;</code> element receives basic styling to make it stand the amongst paragraph text.</p>

<div class="bd-example">
  Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
</div>

        </div>
      </div>
    </div>

    <footer class="bd-footer text-muted" role="contentinfo">
  <div class="container">
    <ul class="bd-footer-links">
      <li><a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap%27" tppabs="https://github.com/twbs/bootstrap">GitHub</a></li>
      <li><a href="javascript:if(confirm(%27https://twitter.com/getbootstrap  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://twitter.com/getbootstrap%27" tppabs="https://twitter.com/getbootstrap">Twitter</a></li>
      <li><a href="javascript:if(confirm(%27http://v4.bootcss.com/content/getting-started/  \n\nThis file was not retrieved by Teleport Ultra, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?%27))window.location=%27http://v4.bootcss.com/content/getting-started/#examples%27" tppabs="http://v4.bootcss.com/content/getting-started/#examples">Examples</a></li>
      <li><a href="javascript:if(confirm(%27http://v4.bootcss.com/content/about/  \n\nThis file was not retrieved by Teleport Ultra, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?%27))window.location=%27http://v4.bootcss.com/content/about/%27" tppabs="http://v4.bootcss.com/content/about/">About</a></li>
    </ul>
    <p>Designed and built with all the love in the world by <a href="javascript:if(confirm(%27https://twitter.com/mdo  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://twitter.com/mdo%27" tppabs="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="javascript:if(confirm(%27https://twitter.com/fat  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://twitter.com/fat%27" tppabs="https://twitter.com/fat" target="_blank">@fat</a>. Maintained by the <a href="javascript:if(confirm(%27https://github.com/orgs/twbs/people  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/orgs/twbs/people%27" tppabs="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/graphs/contributors  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/graphs/contributors%27" tppabs="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
    <p>Currently v4.0.0-alpha. Code licensed <a rel="license" href="javascript:if(confirm(%27https://github.com/twbs/bootstrap/blob/master/LICENSE  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://github.com/twbs/bootstrap/blob/master/LICENSE%27" tppabs="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="javascript:if(confirm(%27https://creativecommons.org/licenses/by/3.0/  \n\nThis file was not retrieved by Teleport Ultra, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?%27))window.location=%27https://creativecommons.org/licenses/by/3.0/%27" tppabs="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
  </div>
</footer>

<script src="../../../cdn.bootcss.com/jquery/1.11.3/jquery.min.js" tppabs="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')</script>


  <script src="../../dist/js/bootstrap.js" tppabs="http://v4.bootcss.com/dist/js/bootstrap.js"></script>



  
    <script src="../../assets/js/vendor/holder.min.js" tppabs="http://v4.bootcss.com/assets/js/vendor/holder.min.js"></script>
  
    <script src="../../assets/js/vendor/jekyll-search.js" tppabs="http://v4.bootcss.com/assets/js/vendor/jekyll-search.js"></script>
  
    <script src="../../assets/js/vendor/ZeroClipboard.min.js" tppabs="http://v4.bootcss.com/assets/js/vendor/ZeroClipboard.min.js"></script>
  
    <script src="../../assets/js/vendor/anchor.js" tppabs="http://v4.bootcss.com/assets/js/vendor/anchor.js"></script>
  
    <script src="../../assets/js/vendor/tether.min.js" tppabs="http://v4.bootcss.com/assets/js/vendor/tether.min.js"></script>
  
    <script src="../../assets/js/src/application.js" tppabs="http://v4.bootcss.com/assets/js/src/application.js"></script>
  


<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" tppabs="http://v4.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>

<script>
SimpleJekyllSearch.init({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('search-results'),
  searchResultTemplate: '<a class="dropdown-item" href="{url}">{title}</a>',
  noResultsText: '<div class="dropdown-item no-results">Sorry, there are no results for that search.</div>',
  dataSource: '../../search.json.js'/*tpa=http://v4.bootcss.com/search.json*/
})

Holder.addTheme('gray', {
  background: '#777',
  foreground: 'rgba(255,255,255,.75)',
  font: 'Helvetica',
  fontweight: 'normal'
})
</script>

  </body>
</html>
